<template>
    <div>
        <el-breadcrumb separator="/" class="m-b-25">
            <el-breadcrumb-item><a href="/">后台首页</a></el-breadcrumb-item>
            <el-breadcrumb-item><a href="/voice">音频管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>添加音频</el-breadcrumb-item>
        </el-breadcrumb>

        <el-form ref="form" :model="form" label-width="80px" class="m-t-10">
            <el-form-item label="音频类型">
                <el-radio-group v-model="style" @change="changeStyle">
                    <el-radio-button label="音频欣赏" value="3"></el-radio-button>
                    <el-radio-button label="音频展示" value="4"></el-radio-button>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="音频分类">
                <el-select ref="type" v-model="form.type" placeholder="请选择分类">
                    <el-option v-for="i in options" :key="i" :label="i.name" :value="i.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="音频名称">
                <el-input ref="title" v-model="form.title" placeholder="请输入音频名称"></el-input>
            </el-form-item>

            <el-form-item label="作者名称">
                <el-input ref="author" v-model="form.author" placeholder="请输入作者名称"></el-input>
            </el-form-item>

            <el-form-item label="作者头像">
                <el-upload :action="uploadImage" :show-file-list="false" :on-success="handleProfileSuccess"
                    :before-upload="beforeImageUpload">
                    <img v-if="profileUrl" :src="profileUrl" class="profile">
                    <el-button v-if="profileUrl" class="reupload" type="warning" icon="el-icon-refresh" size="small">
                        重新上传</el-button>
                    <i v-else class="el-icon-plus profile"></i>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传 JPG / PNG / BMP / WEBP 文件，且不超过 2MB，建议尺寸 200 x 200
                        </div>
                    </template>
                </el-upload>
            </el-form-item>

            <el-form-item label="音频简介">
                <el-input ref="digest" v-model="form.digest" placeholder="请输入音频简介"></el-input>
            </el-form-item>

            <el-form-item label="音频内容">
                <Editor :value="editorValue" @change="changeEditor"></Editor>
            </el-form-item>

            <el-form-item label="音频上传">
                <el-upload :action="uploadVoice" :show-file-list="false" :on-success="handleVoiceSuccess"
                    :before-upload="beforeVoiceUpload" :on-progress="uploadVoiceProcess">
                    <div v-if="form.resource !='' && voiceFlag == false">
                        <video :src="form.resource" class="voice" controls="controls">您的浏览器不支持音频播放</video>
                        <el-button class="reupload" type="warning" icon="el-icon-refresh" size="small">重新上传</el-button>
                    </div>
                    <i v-else-if="form.resource =='' && voiceFlag == false" class="el-icon-plus voice"></i>
                    <el-progress v-if="voiceFlag == true" type="circle" :percentage="voiceUploadPercent"></el-progress>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传 MP3 / WAV / APE / FLAC / OGG 文件，且不超过 50MB
                        </div>
                    </template>
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button type="success" @click="submit">添加</el-button>
                <el-button type="danger" @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {
        get,
        post
    } from '@/network/request'
    import Editor from '@/components/Editor'
    import {
        __IMAGE__,
        __VOICE__
    } from '@/main'

    export default {
        name: 'AddVoice',
        components: {
            Editor
        },
        data() {
            return {
                uploadImage: '',
                uploadVoice: '',
                style: '音频欣赏',
                styleValue: 3,
                options: [],
                form: {
                    type: '',
                    title: '',
                    author: '',
                    profile: '',
                    digest: '',
                    content: '',
                    resource: ''
                },
                editorValue: '',
                profileUrl: '',
                voiceFlag: ''
            }
        },
        created() {
            this.uploadImage = __IMAGE__
            this.uploadVoice = __VOICE__
        },
        mounted() {
            get('/getType', {
                id: this.styleValue
            }).then(res => {
                const result = res.data
                if (result.code == 200) {
                    this.options = result.data
                }
            }).catch()
        },
        methods: {
            changeEditor(val) {
                this.form.content = val
            },
            changeStyle(value) {
                this.form.type = ''
                if (value == '音频欣赏') {
                    this.styleValue = 3
                } else {
                    this.styleValue = 4
                }
                get('/getType', {
                    id: this.styleValue
                }).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.options = result.data
                    }
                }).catch()
            },
            submit() {
                if (this.form.type == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请选择音频分类',
                        offset: 60
                    })
                    this.$refs['type'].focus()
                    return false
                }
                if (this.form.title == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入音频标题',
                        offset: 60
                    })
                    this.$refs['title'].focus()
                    return false
                }
                if (this.form.author == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入音频作者',
                        offset: 60
                    })
                    this.$refs['author'].focus()
                    return false
                }
                if (this.form.profile == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请上传作者头像',
                        offset: 60
                    })
                    return false
                }
                if (this.form.digest == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入音频简介',
                        offset: 60
                    })
                    this.$refs['digest'].focus()
                    return false
                }
                if (this.form.content == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入音频内容详情',
                        offset: 60
                    })
                    return false
                }
                if (this.form.resource == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请上传音频资源',
                        offset: 60
                    })
                    return false
                }
                post('/addVoice', this.form).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.$notify.success({
                            title: '系统提示',
                            message: '添加音频成功',
                            offset: 60
                        })
                        this.$router.push('/voice')
                    }
                }).catch()
            },
            cancel() {
                this.$router.push('/voice')
            },
            handleProfileSuccess(res, file) {
                this.form.profile = res.data
                this.profileUrl = URL.createObjectURL(file.raw)
            },
            beforeImageUpload(file) {
                if (['image/jpeg', 'image/bmp', 'image/png', 'image/webp'].indexOf(file
                        .type) == -1) {
                    this.$message.error({
                        message: '请上传正确的图片格式！',
                        type: 'error',
                        offset: 80
                    })
                    return false
                }

                const size = file.size / 1024 / 1024 < 2
                if (!size) {
                    this.$message.error({
                        message: '图片大小不能超过 2MB！',
                        type: 'error',
                        offset: 80
                    })
                    return false
                }
            },
            beforeVoiceUpload(file) {
                if (['audio/mpeg', 'audio/wav', 'audio/ape', 'audio/flac', 'audio/ogg'].indexOf(file
                        .type) == -1) {
                    this.$message.error({
                        message: '请上传正确的音频格式！',
                        type: 'error',
                        offset: 80
                    })
                    return false
                }
                const size = file.size / 1024 / 1024 < 50
                if (!size) {
                    this.$message.error({
                        message: '音频大小不能超过 50MB！',
                        type: 'error',
                        offset: 80
                    })
                    return false
                }
            },
            uploadVoiceProcess(event) {
                this.voiceFlag = true
                this.voiceUploadPercent = Math.floor(event.percent)
            },
            handleVoiceSuccess(res) {
                this.voiceFlag = false
                this.voiceUploadPercent = 0
                if (res.code == 200) {
                    this.form.resource = res.data
                } else {
                    this.$message.error('音频上传失败，请重新上传！')
                }
            }
        }
    }
</script>

<style scoped>

</style>